<template>
  <div style="display: flex;flex-direction: column;">
    <br>
    <Tabs :value="form.loginType" @on-click="tabClick">
      <TabPane label="密码登录" icon="md-lock" name="1"></TabPane>
      <TabPane label="短信登录" icon="md-mail" name="2"></TabPane>
    </Tabs>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" style="width:15rem">
      <!-- <FormItem prop="roleId">
        <Select v-model="form.roleId" placeholder="请选择登录角色">
          <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
        </Select>
      </FormItem> -->
      <FormItem prop="userName">
        <Input v-model="form.userName" placeholder="请输入用户名" size="large">
        <span slot="prepend">
          <Icon :size="22" type="ios-person"></Icon>
        </span>
        </Input>
      </FormItem>
      <FormItem prop="code" v-if="form.loginType == 2">
        <Row>
          <Col span="14">
          <Input v-model="form.code" placeholder="验证码" size="large">
          <span slot="prepend">
            <Icon :size="22" type="ios-mail-outline"></Icon>
          </span>
          </Input>
          </Col>
          <Col span="10">
          <Button @click="getCode" :disabled="codeStatus" class="buttonStype" size="large">{{ codeText }}</Button>
          </Col>
        </Row>
      </FormItem>
      <FormItem prop="password" v-if="form.loginType == 1">
        <Row>
          <Col span="32">
          <Input v-model="form.password" placeholder="密码" type="password" size="large" password>
          <span slot="prepend">
            <Icon :size="22" type="ios-eye-off"></Icon>
          </span>
          </Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem prop="operator_code" v-show="form.loginType == 1">
        <Row>
          <Col span="32">
          <canvas ref="canvas" width="200" height="50" @click="randomNumber"></canvas>
          <Input v-model="form.operator_code" placeholder="请输入计算结果" type="text" size="large">
          <span slot="prepend">
            <Icon :size="22" type="ios-mail-outline"></Icon>
            <!-- <canvas ref="canvas" width="200" height="50" @click="randomNumber"></canvas> -->
          </span>
          </Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Button @click="handleSubmit" type="primary" long size="large">登录</Button>
      </FormItem>

    </Form>
  </div>
</template>
<script>
import { getCode } from "@/api/user";
import { stringify } from "json5";
export default {
  name: 'LoginForm',
  props: {
    roleIdRules: {
      type: Array,
      default: () => {
        return [
          { transform: (value) => String(value), required: true, message: '请选择要登录的角色', trigger: 'blur' }
        ]
      }
    },
    operatorCodeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '计算结果不能为空', trigger: 'blur' }
        ]
      }
    },
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data() {
    return {
      canvas: '',
      form: {
        userName: '',
        code: '',
        password: '',
        roleId: '',
        oprator: "",
        operator_code: "",
        loginType: "1",
      },
      userType: 1,
      codeStatus: false,
      codeText: '获取验证码',
      codeTime: 60,
      
      colorPhone: "#C4C4C4",
      colorPassWord: "#2d8cf0"
    }
  },
  computed: {
    rules() {
      return {
        userName: this.userNameRules,
        code: this.form.loginType == 2 ? this.codeRules : '',
        password: this.form.loginType == 1 ? this.passwordRules : '',
        operator_code: this.form.loginType == 1 ? this.operatorCodeRules : ''
      }
    }
  },
  methods: {
    tabClick(value) {
      this.form.loginType = value;
      if (value == 1) {
        this.randomNumber();
      }
    },
    canva() {
      let can1 = Math.floor(Math.random() + 1 * 10)
      let can2 = Math.random() < .5 ? '+' : '-'
      let can3 = Math.floor(Math.random() * can1)
      this.canvas = can1 + can2 + can3
      let num1 = can1 + 7;
      let num2 = can3 + 7;
      let type = can2 === '+' ? 1 : 0;
      this.form.oprator = Math.floor(Math.random() * 50) + ',' +
        num1 + ',' +
        Math.floor(Math.random() * 50) + ',' +
        type + ',' +
        Math.floor(Math.random() * 50) + ',' +
        num2 + ',' +
        Math.floor(Math.random() * 50) + ',' +
        Math.floor(Math.random() * 50) + ',' +
        Math.floor(Math.random() * 50) + ',' +
        Math.floor(Math.random() * 50);
      if (can2 === '+') this.canvae = can1 + can3; else if (can2 === '-') this.canvae = can1 - can3
    },
    randomColor() {
      const colorlist = [`rgb(76,117,167)`, `rgb(102,143,81)`, `rgb(65,117,121)`, `rgb(64,71,121)`, `rgb(41,41,41)`, `rgb(26,26,26)`, `rgb(149,121,191)`, `rgb(177,116,150)`, `rgb(114,197,126)`]
      return colorlist[Math.floor(Math.random() * 9)];
    },
    randomAngle() {
      return Math.random() * .9 - 0.45; // 随机角度范围为 -0.45 到 0.45 弧度
    },
    pixel(ctx, canvas) {
      for (let i = 0; i < 30; i++) {
        // const random = Math.random()
        // let width = 0
        // if (random <= 0.1) {
        //     width = Math.random() * canvas.width * .3
        // } else if (random > .1 && random <= .4) {
        //     width = Math.random() * canvas.width * .3 + canvas.width * .3
        // } else {
        //     width = Math.random() * canvas.width * .4 + canvas.width * .6
        // }
        const x = Math.floor(Math.random() * canvas.width);
        const y = Math.floor(Math.random() * canvas.height);
        const color = this.randomColor();
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(x, y, .5, 0, 2 * Math.PI);
        ctx.fillRect(x, y, .5, .5);
        ctx.fill();
      }
    },
    figure(ctx) {
      ctx.font = '300 200px Arial';
      this.canva()
      const can = this.canvas + '=';
      can.split('').forEach((value, index) => {
        const number = value;
        const x = 50 + index * 20;
        const y = 30;
        const angle = this.randomAngle();
        const color = this.randomColor();
        ctx.fillStyle = color;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.scale(0.1, 0.1);
        ctx.fillText(number, 0, 0);
        ctx.restore();
      })
    },
    randomNumber() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      // 设置画布尺寸
      canvas.width = 200;
      canvas.height = 40;
      // 绘制白色背景
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      // 描绘像素点
      this.pixel(ctx, canvas);
      // 绘制数字
      this.figure(ctx)
    },
    changeTabs(name) {
      if (name == 'name1') {
        this.userType = 1;
      } else {
        this.userType = 2;
      }
    },
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            username: this.form.userName,
            password: this.form.password,
            login_type: this.form.loginType,
            code: this.form.code,
            operator: this.form.oprator,
            operator_code: this.form.operator_code
          })
        }
      })
    },
    getCode() {
      const params = {
        mobile: this.form.userName,
        type: 11,
      };
      getCode(params).then(result => {
        this.$Message.success("发送成功");
        this.codeStatus = true;
        this.codeTime = 60;
        let id = setInterval(() => {
          this.codeText = this.codeTime + "重新发送";
          this.codeTime = this.codeTime - 1;
          if (this.codeTime <= 0) {
            this.codeText = '获取验证码';
            this.codeStatus = false;
            clearInterval(id);
          }
        }, 1000);
      })
    },
    changeType(type) {
      this.form.loginType = type;
      if (type == 1) {
        this.colorPhone = "	#C4C4C4";
        this.colorPassWord = "#2d8cf0";
      } else {
        this.colorPhone = "#2d8cf0";
        this.colorPassWord = "	#C4C4C4";
      }

    }
  },
  mounted() {
    this.randomNumber()
  },
}
</script>
